page{
  height:100%;
  background-color:#F7F7F7;
  font-size:calc(unit(24,rpx) * 750 / 390);
}
swiper{
  height: 65.62%;
  swiper-item{
    .img_block{
      height: 100%;
      width: 100%;
      position: absolute;
      .imgBackground{
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 40;
      }
      .imgCover0{
        height:76%;
        width: calc(unit(153,rpx) * 750 / 390);
        position: relative;
        z-index: 50;
        top: -86.4%;
        left: calc(unit(118,rpx) * 750 / 390);;
      }
      .imgCover1{
        height:60%;
        width: calc(unit(215,rpx) * 750 / 390);
        position: relative;
        z-index: 50;
        top: -70.6%;;
        left: calc(unit(87,rpx) * 750 / 390);;
      }
      .imgCover2{
        height:50%;
        width: calc(unit(250,rpx) * 750 / 390);
        position: relative;
        z-index: 50;
        top: -70.6%;
        left: calc(unit(69,rpx) * 750 / 390);;
      }
    }
    .b0{
      opacity: 1;
    }
    .b1{
      opacity: 0;
    }
    .b2{
      opacity: 0;
    }
    .b3{
      opacity: 0;
    }
  }
}
.imgMessage{
  height:4.7%;
  width: calc(unit(36,rpx) * 750 / 390);
  z-index: 52;
  margin-top: 2.1%;;
  left: calc(unit(338,rpx) * 750 / 390);;
}
.click_block{
  //background-color: lightcyan;
  width: calc(unit(260,rpx) * 750 / 390);
  margin-left: auto;
  margin-right: auto;
  height:15.2%;
  margin-top: 4.2%;
  .dot_block{
    height:calc(unit(8,rpx) * 750 / 390);
    width: calc(unit(244,rpx) * 750/ 390);
   // background-color: cornflowerblue;
    margin: 0 auto;
    .dot{
      position: relative;
      left:calc(unit(26,rpx) * 750 / 390);
      height:calc(unit(8,rpx) * 750 / 390);
      width:calc(unit(8,rpx) * 750 / 390);
      background-color: black;
      border-radius:calc(unit(100,rpx) * 750 / 390);
    }
  }
  .switch_block{
    margin-top: calc(unit(4,rpx) * 750/ 390);
    margin-left: calc(unit(8,rpx) * 750 / 390);;
    margin-right: calc(unit(8,rpx) * 750 / 390);;
    height:calc(unit(36,rpx) * 750 / 390);
    width: calc(unit(244,rpx) * 750/ 390);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size:calc(unit(24,rpx) * 750 / 390);
    view{
      transition: all 0.5s;
      width: calc(unit(60,rpx) * 750/ 390);
      white-space: nowrap;
      text-align: center;
    }
  }
  .btn_click{
    height:48.7%;
    width: calc(unit(144,rpx) * 750/ 390);
    background-color: black;
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    border-radius:calc(unit(100,rpx) * 750/ 390);
    color: white;
    text-align: center;
    line-height:calc(unit(56,rpx) * 750 / 390);
    image{
      width:calc(unit(36,rpx) * 750 / 390);
      height:calc(unit(28,rpx) * 750 / 390);
      //background-color:red;
      position: relative;
      margin-top: auto;
      margin-bottom: auto;
      transform: translateY(24%);
    }
  }
}
.ruleShow{
  position: absolute;
  width:calc(unit(300,rpx) * 750 / 390);
  top:26.9%;
  height: 48.69%;
  left: calc((100% - unit(300,rpx) * 750 / 390)/2);
  z-index: 54;
  .ruleImg{
    width:100%;
    height:100%;
  }
  .bottomClick{
    position:absolute;
    bottom:0;
    height:15%;
    width: calc(unit(228,rpx) * 750 / 390);
    left: calc((100% - unit(228,rpx) * 750 / 390)/2);
  }
  .closeImg{
    width:calc(unit(40,rpx) * 750 / 390);
    height:calc(unit(40,rpx) * 750 / 390);
    position: absolute;
    bottom: 0;
    left: calc((100% - unit(40,rpx) * 750 / 390)/2);
    transform: translateY(160%);
  }
}
.mask{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 53;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);

}